<template>
  <div id="main">
    <div id="sidebar">
      <div class="panel">
        <div class="header">
          <span class="col_fade">Markdown 语法参考</span>
        </div>
        <div class="inner">
          <ol>
            <li><tt>### 单行的标题</tt></li>
            <li><tt>**粗体**</tt></li>
            <li><tt>`console.log('行内代码')`</tt></li>
            <li><tt>```js\n code \n```</tt> 标记代码块</li>
            <li><tt>[内容](链接)</tt></li>
            <li><tt>![文字说明](图片链接)</tt></li>
          </ol>
          <span><a href="https://segmentfault.com/markdown" target="_blank">Markdown 文档</a></span>
        </div>
      </div>

      <div class="panel">
        <div class="header">
          <span class="col_fade">话题发布指南</span>
        </div>
        <div class="inner">
          <ol>
            <li>尽量把话题要点浓缩到标题里</li>
            <li>代码含义和报错可在 <a href="http://segmentfault.com/t/node.js">SegmentFault</a> 提问</li>
          </ol>
        </div>
      </div>

    </div>
    <div id="content">
      <div class="panel">
        <div class="header">
          <ol class="breadcrumb">
            <li><a href="/">主页</a><span class="divider">/</span></li>
            <li class="active">发布话题</li>
          </ol>
        </div>
        <div class="inner post">
          <div class="create_topic_form">
            <fieldset>
              <span class="tab-selector">选择版块：</span>
              <select v-model="topics.tab">
                <option value="">请选择</option>
                <option value="share">分享</option>
                <option value="ask">问答</option>
                <option value="job">招聘</option>
                <option value="dev">客户端测试</option>
              </select>
              <textarea autofocus="" v-model="topics.title" class="span9" id="title" name="title" rows="1" placeholder="标题字数 10 字以上"></textarea>
              <div class="editer" contentEditable="true"></div>
              <div class="editor_buttons">
                <button class="span-primary submit_btn" @click="handleSubmit">提交</button>
              </div>
            </fieldset>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
  // import Vue from 'vue'
  // import _toast from './../../components/common/toast'
  //Vue.use(_toast)
  import {createTopic} from "../../assets/js/api";
  export default {
    name: "create",
    head(){
      return {
        title:'新建专题'
      }
    },
    data(){
      return {
        topics:{
          title:'',
          tab:'',
          content:''
        }
      }
    },
    methods:{
      handleSubmit(){
        this.topics.content = document.querySelector('.editer').innerHTML;
        let {title,tab,content} = this.topics;
        if(!title){
          this.$_toast('标题不能为空！')
          return
        }else if(!tab){
          this.$_toast('请选择分类！')
          return;
        }else if(!content){
          this.$_toast('内容不能为空！')
          return;
        }
        createTopic({axios:this.$axios,...this.topics}).then((data)=>{
          this.topics = {
            title:'',
            tab:'',
            content:''
          }
          this.$_toast('话题发布成功!')
        })
      }
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .editer{height: 300px;border: 1px solid #eee;outline: none;padding: 5px;line-height: 20px;}
</style>
